// 导入react
import React from 'react'
import ReactDom from 'react-dom'
// 引入css
import './index.css'
// 导入抽离的组件
// import {Box, Bcs} from './Box'
// import HandleClick from './handleClick'
// import Count from './count'
// import {ThisBind, ThisFun, ThisClass }from './Cursor'
// import Input from './input'
// import Comment from './comment'
// import CommentInput from './comment2'
import { HelloProp } from './01father'
import {Parent} from './02parent'
import {Father} from './03brother'
import {App} from './04context'
import { Clock } from './05clock'
import { Toggle } from './06Toggle '
import { LoginControl } from './07LoginControl '
import { WarningBanner } from './08WarningBanner'
// import { Calculator } from './09Calculator '
// import { Calculator1 } from './10scaleNames'
import { Calculator3 } from './11tryConvert'
import { WelcomeDialog } from './12WelcomeDialog'
import { SignUpDialog } from './13SignUpDialog '
// import SomeApp from './some'
// 嵌入js表达式，单花括号包起
const name = 'rose'
const age = 18

let fn2 = () => {
  return (
    <div>
      <div>组件是封闭的，要接收外部数据应该通过Props来实现</div>
      <div>props的作用：接收传递给组件的数据</div>
      <div>传递数据：给组件标签添加属性</div>
      <div>
        接收数据：函数组件通过参数props接收数据，类组件通过this.props接收数据
      </div>
    </div>
  )
}
const title = (
  <h1 className='title'>
    Hello JSX,来者是{name}，年方{age}
    <span />
    {/* <SomeApp></SomeApp> */}
    {/* <Box/> */}
    {/* <HandleClick></HandleClick> */}
    {/* <Count></Count> */}
    {/* <Bcs></Bcs> */}
    {/* <ThisBind></ThisBind> */}
    {/* <ThisFun></ThisFun> */}
    {/* <ThisClass></ThisClass> */}
    {/* <Input></Input> */}
    {/* <Comment></Comment> */}
    {/* <CommentInput></CommentInput> */}
    <HelloProp
      name='我是传给组件的值，如果是数字要{}包起来，还可以传函数，元素属性，接收用props接收'
      age={18}
      color={['red','green']}
      fn={() => {
        return '我是一个函数'
      }}
      tagName={<span>我是元素标签</span>}
      fn2 = {fn2()}
    ></HelloProp>
    <Parent></Parent>
    <Father></Father>
    <App colors={['red']} fn={()=>{}}>我是children</App>
    <Clock></Clock>
    <Toggle></Toggle>
    <LoginControl></LoginControl>
    <WarningBanner></WarningBanner>
     {/* <Calculator></Calculator>
    <Calculator1></Calculator1>  */}
    <Calculator3></Calculator3>
    <WelcomeDialog></WelcomeDialog>
    <SignUpDialog></SignUpDialog>
  </h1>
)
// 渲染react元素，挂载的root在public里的index.html里
ReactDom.render(title, document.getElementById('root'))
